<template>
  <div class="customersMy">
    <c-title :hide="false" text="我的顾客"></c-title>
    <div class="headTabs">
      <van-tabs v-model="active_nav" line-width="20px" title-active-color="#F15353" @change="tabChange">
        <van-tab :title="`20天内顾客（${recent_count}）`"></van-tab>
        <van-tab :title="`全部有效顾客（${usable_count}）`"></van-tab>
      </van-tabs>
    </div>
    <div class="childTab">
      <van-tabs v-model="active" @change="childTabchange" :ellipsis="false" line-width="20px" title-active-color="#F15353" background="transparent">
        <van-tab title="全部" :name="all"></van-tab>
        <van-tab title="新顾客" name="is_today"></van-tab>
        <van-tab title="店铺首单" name="is_buy"></van-tab>
        <van-tab title="有效" name="is_usable" v-if="active_nav != 1"></van-tab>
      </van-tabs>
      <div class="customersList" v-for="item in dataList" :key="item.id">
        <div class="member" v-if="item.has_one_member">
          <div class="memberImg">
            <img :src="item.has_one_member.avatar_image" alt="" />
          </div>
          <div class="member_detail">
            <div class="member_detail_top">
              <div class="member_detail_top_l">
                <div class="name">{{ item.has_one_member.nickname }}</div>
                <div class="tag">{{ item.has_one_member.uid }}</div>
              </div>
              <div class="member_detail_top_r" @click="to_customersDetail(item.uid)">查看详情<i class="iconfont icon-icon_more11"></i></div>
            </div>
            <div class="member_detail_bottom">最近访问时间: {{ item.last_visit_time_str }}</div>
          </div>
        </div>
        <div class="list">
          <div class="lis">售后率：{{ item.refund_percent }}%</div>
          <div class="lis">今日消费：{{ item.today_order_amount }}</div>
          <div class="lis">今日下单：{{ item.today_order_count }}</div>
          <div class="lis">今日浏览：{{ item.today_visit_count }}</div>
          <div class="lis">今日加购：{{ item.today_cart_count }}</div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { scrollMixin } from "utils/mixin";
export default {
  mixins: [scrollMixin],
  data() {
    return {
      recent_count: 0,
      usable_count: 0,
      active_nav: "0",
      active: "0",
      page: 1,
      total_page: 0,
      isLoadMore: true,
      dataList: []
    };
  },
  activated() {
    this.get_sum_Data();
    this.init();
    this.getData();
  },
  methods: {
    init() {
      this.page = 1;
      this.total_page = 0;
      this.isLoadMore = true;
      this.dataList = [];
    },
    to_customersDetail(id) {
      this.$router.push(this.fun.getUrl("customersDetail", { id: id }));
    },
    childTabchange() {
      this.init();
      this.getData();
    },
    tabChange() {
      this.active = "all";
    },
    async getData() {
      let json = {};
      if (this.active_nav == 0) {
        json.is_new = 1;
      } else if (this.active_nav == 1) {
        json.is_usable = 1;
      }
      if (this.active == "is_today") {
        json.is_today = 1;
      } else if (this.active == "is_buy") {
        json.is_buy = 1;
      } else if (this.active == "is_usable") {
        json.is_usable = 1;
      }
      let { data, msg, result } = await $http.post("plugin.cloud-shop.frontend.customer.index", json, "");
      if (result) {
        console.log(data);
        this.dataList = data.data;
        this.total_page = data.last_page;
        this.isLoadMore = true;
      } else {
        this.$toast(msg);
      }
    },
    async getMoreData() {
      if (!this.isLoadMore) return;
      this.isLoadMore = false; // 防止多次请求分页数据
      if (this.page >= this.total_page) {
        return;
      } else {
        this.page = this.page + 1;
        let json = {
          page: this.page
        };
        if (this.active_nav == 0) {
          json.is_new = 1;
        } else if (this.active_nav == 1) {
          json.is_usable = 1;
        }
        if (this.active == "is_today") {
          json.is_today = 1;
        } else if (this.active == "is_buy") {
          json.is_buy = 1;
        } else if (this.active == "is_usable") {
          json.is_usable = 1;
        }
        let { data, msg, result } = await $http.post("plugin.cloud-shop.frontend.customer.index", json, "");
        this.isLoadMore = true;
        if (result) {
          this.dataList = this.dataList.concat(data.data);
        } else {
          this.page = this.page - 1;
          this.$toast(msg);
        }
      }
    },
    async get_sum_Data() {
      let { data, msg, result } = await $http.post("plugin.cloud-shop.frontend.customer.summary", {}, "");
      if (result) {
        this.recent_count = data.recent_count;
        this.usable_count = data.usable_count;
      } else {
        this.$toast(msg);
      }
    }
  }
};
</script>
<style lang="scss" scoped>
.headTabs {
  padding-bottom: 0.38rem;
  background: #fff;
}
.childTab {
  margin: 0 0.75rem;
  .customersList {
    background: #ffffff;
    padding: 0.69rem 0.75rem;
    box-sizing: border-box;
    margin-top: 0.62rem;
    background: #ffffff;
    border-radius: 0.5rem;
    padding-bottom: 0;
    .list {
      display: flex;
      flex-wrap: wrap;
      .lis {
        width: calc(100% / 3);
        text-align: left;
        font-size: 0.81rem;
        color: #00001c;
        margin-bottom: 0.94rem;
      }
    }
    .member {
      display: flex;
      padding-bottom: 0.75rem;
      border-bottom: 1px solid #f0f0f1;
      margin-bottom: 0.94rem;
      .memberImg {
        width: 2.5rem;
        height: 2.5rem;
        border-radius: 50%;
        margin-right: 0.53rem;
        img {
          width: 100%;
          height: 100%;
          border-radius: 50%;
        }
      }
      .member_detail {
        flex: 1;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        .member_detail_bottom {
          font-size: 0.75rem;
          color: #808080;
          text-align: left;
        }
        .member_detail_top {
          display: flex;
          justify-content: space-between;
          .member_detail_top_r {
            display: flex;
            align-items: center;
            font-size: 0.69rem;
            color: #808080;
            flex-shrink: 0;
            .icon-icon_more11 {
              font-size: 0.9rem;
              color: #aaaab3;
            }
          }
          .member_detail_top_l {
            display: flex;
            flex: 1;
            align-items: center;
            margin-right: 0.4688rem;
            overflow: hidden;
            .name {
              font-weight: 500;
              font-size: 0.94rem;
              white-space: nowrap;
              overflow: hidden;
              text-overflow: ellipsis;
            }
            .tag {
              margin-left: 0.31rem;
              font-size: 0.63rem;
              color: #f15353;
              padding: 0.16rem;
              background: #feeded;
              flex-shrink: 0;
              border-radius: 0.13rem;
            }
          }
        }
      }
    }
  }
}
</style>
